<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
    <el-container class="custom__container">
        <el-aside class="custom__aside" width="260px">
            <el-menu :default-active="active" router>
                <el-menu-item v-for="item in menuList" :index="item.active" :route="item.active" :key="item.active">
                    <el-icon>
                        <list />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>
                <el-sub-menu index="SubMenuComponents" v-if="ComponentMenuList.length > 0">
                    <template #title>
                        <el-icon><icon-menu /></el-icon>
                        <span>公共组件</span>
                    </template>
                    <el-icon>

                    </el-icon>
                    <el-menu-item v-for="item in ComponentMenuList" :index="item.active" :route="item.active"
                        :key="item.active">
                        <el-icon>
                            <document />
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </el-menu-item>

                </el-sub-menu>
            </el-menu>
        </el-aside>

        <el-main class="custom__main">
            <router-view />
        </el-main>
    </el-container>

</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import children, { rootPath, ComponentChildren } from '../children'
    import { Menu as IconMenu, List, Document } from '@element-plus/icons-vue'

    // 类型
    interface Option {
        title: string
        active: string
    }

    // 获取当前路由实例
    const route = useRoute()
    const router = useRouter()

    // 定义菜单列表
    const menuList = ref<Option[]>([])
    const ComponentMenuList = ref<Option[]>([])

    // 获取菜单列表
    menuList.value = children.map((route) => {
        return {
            title: route.meta! ? route.meta!.title || '' : '',
            active: rootPath + route.path
        } as Option
    })

    // 获取菜单列表
    ComponentMenuList.value = ComponentChildren.map((route) => {
        return {
            title: route.meta! ? route.meta!.title || '' : '',
            active: rootPath + route.path
        } as Option
    })

    // 当前激活的菜单
    const active = ref<string>('')

    // 监听路由变化，设置当前激活的菜单
    onMounted(() => {
        if (route.path === '/') {
            router.push(menuList.value[0].active)
            active.value = menuList.value[0].active
        } else {
            active.value = route.path
        }
    })
</script>

<style lang="scss" scoped>

    // 容器
    .custom__container {
        height: 100%;
        width: 100%;
        position: relative;
    }

    // 左侧
    .custom__aside {
        background: #fff;
        overflow-y: auto;
        border-radius: 5px;
        overflow: hidden;
        overflow-y: auto;

        // 菜单项
        ::v-deep(.el-menu-item) {
            &.is-active {
                background: #0062f616;
            }
        }

    }

    // 主要内容
    .custom__main {
        border-radius: 5px;
        padding: 10px;
        margin-left: 10px;
        background: #fff;
        overflow-y: auto;

        // 优化滚动条样式
        &::-webkit-scrollbar {
            width: 6px;
        }

        &::-webkit-scrollbar-thumb {
            background-color: #dcdfe6;
            border-radius: 3px;
        }

        &::-webkit-scrollbar-track {
            background-color: #f5f7fa;
        }
    }
</style>
